<template>
  <div>
      <div>
        <el-col :span="11">
          <el-table
              :data="data1"
              border
              ref="selection"
              @selection-change="checkAll"
              style="width: 100%">
            <el-table-column
                type="selection"
                width="30">
            </el-table-column>
            <el-table-column
                prop="id"
                label="资源编号"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="资源名称"
                width="100"
            >
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="2">
          <div class="opSetting">
            <div @click="handelSelect">
              <el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
                选中
              </el-button>
            </div>
            <div class="spacing" @click="handleRemoveSelect">
              <el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
                取消
              </el-button>
            </div>
          </div>
        </el-col>

        <el-col :span="11">
          <el-table
              :data="selectArr"
              border
              ref="selection"
              @selection-change="checkRightAll"
              style="width: 100%">
            <el-table-column
                type="selection"
                width="30">
            </el-table-column>
            <el-table-column
                prop="id"
                label="资源编号"
                width="100"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="资源名称"
                width="100"
            >
            </el-table-column>
          </el-table>
        </el-col>

      </div>

  </div>
</template>

<script>
// import axios from "../../http/axios";
export default {
  name: "permission",
  data() {
    return {
      selectArr:[],  // 右边列表
      buttonSize: 'large',
      options: [],
      value: '',
      data1:[],
      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [], // 右边选中列表数据
    };
  },
  methods: {
    // getdata(){
    //   axios("permission","get").then(res=>{
    //     this.data1 = res.list
    //   })
    // },
    checkAll(val){
      this.nowSelectData = val;
    },
    checkRightAll(val) {
      this.nowSelectRightData = val;
    },
    // 选中
    handelSelect(){
      this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
      this.handleRemoveTabList(this.nowSelectData,  this.data1);
      this.nowSelectData = [];
    },
    // 取消
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData)
      this.handleRemoveTabList(this.nowSelectRightData,  this.selectArr);
      this.nowSelectRightData = [];
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);
      return arr;
    },
    handleRemoveTabList(isNeedArr,  originalArr) {
      if(isNeedArr.length && originalArr.length) {
        for(let i=0; i<isNeedArr.length; i++) {
          for(let k=0; k<originalArr.length; k++) {
            if(isNeedArr[i]["name"] === originalArr[k]["name"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    }
  },
  mounted() {
    this.getdata()
  }

}
</script>

<style scoped>
.opSetting{
  text-align: center;
  margin-top:30px;
}
.spacing{
  margin-top:10px;
}
</style>